<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="scss/dist/app.css" />
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
  </head>
  <body>
    <header>
      <!-- 顶部搜索条 -->
      <div class="search">
        <div class="logo">
          <i class="fa fa-home" aria-hidden="true"></i>
        </div>
        <div class="search-box">
          <div class="icon">
            <i class="fa fa-search" aria-hidden="true"></i>
          </div>
          搜索商品名称
        </div>
        <div class="user">
          <i class="fa fa-user" aria-hidden="true"></i>
        </div>
      </div>
      <!-- 顶部搜索条 end-->
      <div class="menu">
        <input type="checkbox" id="toggleMenu" hidden />
        <label for="toggleMenu">
          <i class="fa fa-vine" aria-hidden="true"></i>
        </label>
        <div class="category">
          <h2>全部</h2>
          <ul>
            <li><a href="" class="active">汽车</a></li>
            <li><a href="">娱乐</a></li>
            <li><a href="">飞机</a></li>
            <li><a href="">游戏</a></li>
            <li><a href="">电视</a></li>
            <li><a href="">手机</a></li>
            <li><a href="">摩托车</a></li>
            <li><a href="">电视</a></li>
            <li><a href="">手机</a></li>
            <li><a href="">摩托车</a></li>
          </ul>
        </div>
        <nav>
          <div>
            <a href="" class="active">推荐</a>
            <a href="">手机</a>
            <a href="">游戏</a>
            <a href="">电视</a>
            <a href="">智能</a>
            <a href="">笔记本</a>
          </div>
        </nav>
      </div>
    </header>
    <main>
      <img src="images/mi.jpg" alt="" />

      <div class="category">
        <a href=""><img src="images/c1.png" alt="" /></a>
        <a href=""><img src="images/c2.webp" alt="" /></a>
        <a href=""><img src="images/c3.webp" alt="" /></a>
        <a href=""><img src="images/c4.webp" alt="" /></a>
        <a href=""><img src="images/c5.webp" alt="" /></a>
        <a href=""><img src="images/c6.webp" alt="" /></a>
        <a href=""><img src="images/c1.png" alt="" /></a>
        <a href=""><img src="images/c2.webp" alt="" /></a>
        <a href=""><img src="images/c4.webp" alt="" /></a>
        <a href=""><img src="images/c6.webp" alt="" /></a>
      </div>

      <div class="ad">
        <a href="">
          <img src="images/h1.webp" alt="" />
        </a>
        <div>
          <a href="">
            <img src="images/h2.webp" alt="" />
          </a>
          <a href="">
            <img src="images/h3.webp" alt="" />
          </a>
        </div>
      </div>

      <a href="">
        <img src="images/a1.webp" alt="" />
      </a>
      <a href="">
        <img src="images/a2.webp" alt="" />
      </a>

      <div class="lists">
        <section>
          <div class="thumb">
            <img src="images/g1.jpg" alt="" />
          </div>
          <h5>小米10 Pro</h5>
          <div class="description">骁龙865 / 50倍变焦</div>
          <div class="price">4999 <small>起</small></div>
          <a href="#" class="btn"> 立即购买 </a>
        </section>
        <section>
          <div class="thumb">
            <img src="images/g1.jpg" alt="" />
          </div>
          <h5>小米10 Pro</h5>
          <div class="description">骁龙865 / 50倍变焦</div>
          <div class="price">4999 <small>起</small></div>
          <a href="#" class="btn"> 立即购买 </a>
        </section>
        <section>
          <div class="thumb">
            <img src="images/g1.jpg" alt="" />
          </div>
          <h5>小米10 Pro</h5>
          <div class="description">骁龙865 / 50倍变焦</div>
          <div class="price">4999 <small>起</small></div>
          <a href="#" class="btn"> 立即购买 </a>
        </section>
        <section>
          <div class="thumb">
            <img src="images/g1.jpg" alt="" />
          </div>
          <h5>小米10 Pro</h5>
          <div class="description">骁龙865 / 50倍变焦</div>
          <div class="price">4999 <small>起</small></div>
          <a href="#" class="btn"> 立即购买 </a>
        </section>
      </div>
    </main>
    <footer>
      <a href="" class="active">
        <i class="fa fa-home" aria-hidden="true"></i>
        首页
      </a>

      <a href="">
        <i class="fa fa-facebook" aria-hidden="true"></i>
        游戏
      </a>
      <a href="">
        <i class="fa fa-google" aria-hidden="true"></i>
        电话
      </a>
      <a href="">
        <i class="fa fa-wrench" aria-hidden="true"></i>
        视频
      </a>
      <a href="">
        <i class="fa fa-weibo" aria-hidden="true"></i>
        娱乐
      </a>
    </footer>
  </body>
</html>
